/*
消息界面路由容器组件
 */
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { List, Badge } from 'antd-mobile'
import QueueAnim from 'rc-queue-anim'; // 引入进出场动效组件
const Item = List.Item
const Brief = Item.Brief

/*
聊天消息分组的逻辑
对chatMsgs按chat_id进行分组, 并得到每个组的lastMsg组成的数组
1. 找出每个聊天的lastMsg, 并用一个对象容器来保存 {chat_id, lastMsg}
2. 得到所有lastMsg的数组
3. 对数组进行排序(按create_time降序)
 */
function getLastMsg (msgList,_id) {
  let obj = {}  // 对象容器

  // 遍历消息列表数组
  msgList.forEach(value => {
      // 对发给我的未读消息做个体统计 对每条消息是否未读都一个0 或者 1
      if (value.to === _id && !value.read) {
        //  如果value.to === _id 说明消息是发给我的  并且消息是未读的
        value.myUnreadMsgcount = 1 // 给个1说明这条是给我的消息并且未读 用来计数
      } else {
        value.myUnreadMsgcount = 0  // 不是发给我的或者已读的消息 给个0作为已读标识
      }
      
      // 根据chat_id将消息分组
    let chatId = value.chat_id
    if (!obj[chatId]) {
      // 如果对象容器没有此消息id的属性那么给该对象创建一个
      obj[chatId] = value
    } else {
      // 保存原来的未读消息数量 ： 原来未读数量保存在obj[chatId]的myUnreadMsgcount属性中
      let myUnreadMsgcount =  obj[chatId].myUnreadMsgcount

      // 该对象容器已经有chatid分组了，那么根据聊天消息创建的事件creat_time来 决定是否替换为当前的value聊天消息
      if (value.create_time > obj[chatId].create_time) {
        // 如果当前遍历的消息对象的创建时间比 obj的chat‘id属性值的对象的创建时间新那么 将当前的value对象重新赋值给对象容器
        obj[chatId] = value
      }
      // 将原来的未读数量和 现在和消息的未读数量进行相加得到最新的未读消息的数量
      obj[chatId].myUnreadMsgcount =  myUnreadMsgcount + value.myUnreadMsgcount
    }
  
  })
  // 对分组数据按 聊天的创建时间进行排序
  let lastMsgArr = Object.values(obj)
  lastMsgArr.sort((a,b) =>   b.create_time >  a.create_time   )
  return lastMsgArr
}

// 2. 得到所有lastMsg的数组

// 3. 对数组进行排序(按create_time降序)

class Message extends Component {
  
  render () {
    
    // 得到用户 以及聊天数据
    let {_id} = this.props.user
    let {chatMsg, users} = this.props.chat

    if (chatMsg.length ==0 || !users) {
      return null
    }
    // 过滤出和自己有关的 聊天信息 通过 from  和 to  组成一个chatid来过滤
    const filterChaMsg = chatMsg.filter(
      value => value.from === _id || value.to === _id)
    // console.log(filterChaMsg)
   //  进行分组和 时间排序
   let  lastMsgArr =  getLastMsg(filterChaMsg,_id)
    // console.log(lastMsgArr)

    return (
      // 渲染消息分组
      <List className={'msgfenzu'}>
        <QueueAnim type={'scale'}>
          {
            lastMsgArr.map(msg =>{
              // 消息分组要显示的
              const targetUserId = msg.to ==_id ? msg.from : msg.to // 确定消息的发送者
              // console.log(targetUserId)
              // 得到目标用户的信息
              const targetUser = users[targetUserId]
              return (
                <Item
                  key={msg._id}
                  extra={<Badge text={msg.myUnreadMsgcount}/>}
                  thumb={targetUser.header ? `/images/headers/${targetUser.header}.png` : null}
                  arrow='horizontal'
                  onClick={() => {this.props.history.push(`/chat/${targetUserId}`)}}
                >
                  {msg.content}
                  <Brief>  {msg.to !==_id ? '我': '消息来自:' + targetUser.username}</Brief>
                </Item>
              )
            })
          }
        </QueueAnim>
     
      </List>
    )
  }
}

export default connect(
  state => ({user: state.user.data, chat: state.chat}),
  {},
)(Message)